<template>
  <view>
    <view class="container">
      <u-navbar :title="title" title-size="36"></u-navbar>
      <view v-if="type == 1">
        <view class="top">
          <view class="view-item1">
            <p class="title">活动名称</p>
            <input v-model="groupForm.name" type="text" placeholder="请输入活动名称" />
          </view>
          <view class="view-item1" @click="onPicker('time', 'startTime')">
            <p>开始时间</p>
            <text v-if="startTime"
              >{{
                startTime.year +
                '-' +
                startTime.month +
                '-' +
                startTime.day +
                ' ' +
                startTime.hour +
                ':' +
                startTime.minute
              }}
            </text>
            <text v-else style="color: #999999">选择</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>
          <view class="view-item1" @click="onPicker('time', 'endTime')">
            <p>截止时间</p>
            <text v-if="endTime"
              >{{
                endTime.year +
                '-' +
                endTime.month +
                '-' +
                endTime.day +
                ' ' +
                endTime.hour +
                ':' +
                endTime.minute
              }}
            </text>
            <text v-else style="color: #999999">选择</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>
          <view class="view-item1" @click="routeTo">
            <p>团购商品</p>
            <text v-if="goodsInfo" style="color: #999999">已选中商品</text>
            <text v-else style="color: #999999">选择团购商品</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>
        </view>

        <view class="top">
          <!-- <view class="view-item1" @click="onPicker('selector', 'personNum')">
						<p>开团人数</p>
						<text v-if="personNum">{{personNum.label}}人</text>
						<text v-else style="color:#999999">选择参与人数数量</text>
						<u-icon style="margin-left: 10rpx;" name="/static/img/more.png" size="15"></u-icon>
					</view> -->
          <view class="view-item1">
            <p class="title">开团人数</p>
            <input v-model="groupForm.userSize" type="text" placeholder="请输入开团人数" />
          </view>
          <view class="view-item1">
            <p class="title">团购价格</p>
            <input v-model="groupForm.combinationPrice" type="text" placeholder="请输入抢购价格" />
          </view>
          <view class="view-item1">
            <p class="title">单次限购</p>
            <input
              v-model="groupForm.singleLimitCount"
              type="text"
              placeholder="每人单次可买几件"
            />
          </view>
          <view class="view-item1">
            <p class="title">总限购数</p>
            <input v-model="groupForm.totalLimitCount" type="text" placeholder="总限购数量" />
          </view>
          <view class="view-item1">
            <p class="title">限制时长</p>
            <input
              v-model="groupForm.limitDuration"
              type="text"
              placeholder="未成功拼团自动失效时间(小时)"
            />
          </view>
        </view>

        <!-- <view class="content">
					<view class="">
						<view class="">
							活动封面
						</view>
						<u-upload
						  action="action"
						  max-count="1"
						  file-list="fileList"></u-upload>
					</view>
				</view> -->
      </view>
      <view v-else-if="type == 2">
        <view class="top">
          <view class="view-item1">
            <p class="title">抢购名称</p>
            <input type="text" placeholder="请输入抢购名称" />
          </view>
          <view class="view-item1" @click="onPicker('time', 'startTime')">
            <p>开始时间</p>
            <text v-if="startTime"
              >{{
                startTime.year +
                '-' +
                startTime.month +
                '-' +
                startTime.day +
                ' ' +
                startTime.hour +
                ':' +
                startTime.minute
              }}
            </text>
            <text v-else style="color: #999999">选择</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>
          <view class="view-item1" @click="onPicker('selector', 'date')">
            <p>抢购时间段</p>
            <text v-if="date">{{ date.label }}</text>
            <text v-else style="color: #999999">选择</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>
          <view class="view-item1" @click="onPicker('selector')">
            <p>抢购商品</p>
            <text style="color: #999999">选择</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>
        </view>

        <view class="top">
          <view class="view-item1">
            <p class="title">抢购价格</p>
            <input type="text" placeholder="请输入抢购价格" />
          </view>
          <view class="view-item1" @click="onPicker('selector')">
            <p>每人限购</p>
            <text v-if="num"></text>
            <text v-else style="color: #999999">{{ num.label }}次</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>
        </view>

        <view class="content">
          <view class="">
            <view class=""> 抢购时封面</view>
            <u-upload action="action" max-count="1" file-list="fileList"></u-upload>
          </view>
        </view>
      </view>
      <view v-else>
        <view class="top">
          <view class="view-item1" @click="onPicker('selector', 'coupon')">
            <p>优惠类型</p>
            <text v-if="coupon">{{ coupon.label }}</text>
            <text v-else style="color: #999999">选择</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>
        </view>
        <view class="top">
          <view class="view2">
            <view class="view2-item">
              <p class="title">顾客支付金额</p>
              <p class="price">
                <text>¥ </text>
                <input v-model="couponForm.usePrice" type="text" placeholder="请输入金额" />
              </p>
            </view>
            <view class="view2-item">
              <p class="title">
                可享优惠
                <text style="font-size: 20rpx; color: #f54831">（商家承担）</text>
              </p>
              <p class="price">
                <text>¥</text>
                <input v-model="couponForm.discountPrice" type="text" placeholder="请输入金额" />
              </p>
            </view>
          </view>
        </view>

        <view class="top">
          <view class="view-item1">
            <view class="title2">发放券张数</view>
            <input v-model="couponForm.totalCount" type="text2" placeholder="请输入发放券张数" />
          </view>

          <view class="view-item1" @click="onPicker('time', 'startTime')">
            <p>开始时间</p>
            <text v-if="startTime"
              >{{
                startTime.year +
                '-' +
                startTime.month +
                '-' +
                startTime.day +
                ' ' +
                startTime.hour +
                ':' +
                startTime.minute
              }}
            </text>
            <text v-else style="color: #999999">选择</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>
          <view class="view-item1" @click="onPicker('time', 'endTime')">
            <p>结束时间</p>
            <text v-if="endTime"
              >{{
                endTime.year +
                '-' +
                endTime.month +
                '-' +
                endTime.day +
                ' ' +
                endTime.hour +
                ':' +
                endTime.minute
              }}
            </text>
            <text v-else style="color: #999999">选择</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>
          <view class="view-item1" @click="onPicker('selector', 'num')">
            <p>每个用户可领次数</p>
            <text v-if="num"></text>
            <text v-else style="color: #999999">{{ num.label }}次</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>
          <view class="view-item1" @click="onPicker('selector', 'validityType')">
            <p>生效日期类型</p>
            <text v-if="num"></text>
            <text v-else style="color: #999999">{{ num.label }}次</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>

          <view class="view2">
            <view style="display: flex; align-items: center">
              <p class="title">领取后失效时间</p>
              <input
                style="width: 100%"
                v-model="couponForm.fixedStartTerm"
                type="text"
                placeholder="未使用自动失效(天)"
              />
            </view>
          </view>
        </view>

        <view class="content">
          <view class="view-item1" @click="onPicker('selector')">
            <p>使用范围</p>
            <text style="color: #999999">选择关联商品</text>
            <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view @click="submit" class="submit-btn" style="margin: 100rpx 20rpx"> 确认创建</view>
    <u-picker
      :mode="mode"
      v-model="show"
      :range="range"
      :params="params"
      @confirm="confirmSelctor"
      range-key="label"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 1,
      title: '新建限时抢购',
      mode: 'selector',
      show: false,
      checked: false,
      rangeMode: '',
      rangeValue: '',
      region: '',
      startTime: '',
      endTime: '',
      date: '',
      personNum: '',
      num: '',
      coupon: '',
      range: [],
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: false
      },
      goodsInfo: '',
      couponForm: {},
      fileList: [],
      groupForm: {
        name: '',
        spuId: '',
        totalLimitCount: '',
        singleLimitCount: '',
        startTime: '',
        endTime: '',
        userSize: 2,
        virtualGroup: false,
        limitDuration: 2,
        products: []
      },
      couponForm: {
        name: '优惠券',
        totalCount: 9999,
        takeLimitCount: 9999,
        takeType: 1,
        usePrice: 0,
        productScope: 2,
        productScopeValues: '1,3',
        validityType: 1,
        validStartTime: '2019-08-24T14:15:22Z',
        validEndTime: '2019-08-24T14:15:22Z',
        fixedStartTerm: 0,
        fixedEndTerm: 1,
        discountType: 1,
        discountPercent: 80,
        discountPrice: 10,
        discountLimitPrice: 100
      }
    }
  },
  onLoad(options) {
    this.title = options.title
    this.type = options.type
    this.form = options.data
  },
  methods: {
    confirmSelctor(e) {
      if (this.rangeMode == 'coupon') {
        this.coupon = this.range[e]
      } else if (this.rangeMode == 'startTime') {
        this.startTime = e
      } else if (this.rangeMode == 'endTime') {
        this.endTime = e
      } else if (this.rangeMode == 'personNum') {
        this.personNum = this.range[e]
      } else if (this.rangeMode == 'num') {
        this.num = this.range[e]
      } else if (this.rangeMode == 'date') {
        this.date = this.range[e]
      }
    },
    onPicker(e, t) {
      if (t == 'personNum') {
        this.range = [
          {
            label: '2人',
            id: 2
          },
          {
            label: '3人',
            id: 3
          }
        ]
      } else if (t == 'num') {
        this.range = [
          {
            label: '1次',
            id: 1
          },
          {
            label: '2次',
            id: 2
          }
        ]
      } else if (t == 'coupon') {
        this.range = [
          {
            label: '满减券',
            id: 1
          },
          {
            label: '优惠券',
            id: 2
          }
        ]
      } else if (t == 'statrTime' || t == 'endTime') {
        this.params = {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: false
        }
      } else if (t == 'date') {
        this.params = {
          year: false,
          month: false,
          day: false,
          hour: true,
          minute: true,
          second: false
        }
      }
      this.rangeMode = t
      this.mode = e
      this.show = true
    },
    submit() {
      if (this.type == 1) {
        console.log(this.goodsInfo)
        this.groupForm.startTime =
          this.startTime.year +
          '-' +
          this.startTime.month +
          '-' +
          this.startTime.day +
          ' ' +
          this.startTime.hour +
          ':' +
          this.startTime.minute +
          ':' +
          '00'
        this.groupForm.endTime =
          this.endTime.year +
          '-' +
          this.endTime.month +
          '-' +
          this.endTime.day +
          ' ' +
          this.endTime.hour +
          ':' +
          this.endTime.minute +
          ':' +
          '00'

        this.groupForm.spuId = this.goodsInfo[0].spuId
        this.userSize = this.personNum.id
        this.groupForm.products = []
        this.goodsInfo.forEach((item) => {
          item.combinationPrice = this.groupForm.combinationPrice
          this.groupForm.products.push(item)
        })

        this.$u
          .post('/app-api/promotion/combination-activity/create', this.groupForm)
          .then((res) => {})
      } else if (this.type == 2) {
      } else {
        this.$u.post('/app-api/promotion/coupon-template/create', this.groupForm).then((res) => {})
      }
    },
    routeTo() {
      uni.$on('goodsInfo', (cb) => {
        this.goodsInfo = cb
        uni.$off('goodsInfo')
      })
      uni.navigateTo({
        url: '/other_center/video-bind-goods/video-bind-goods?action=' + 1
      })
    }
  }
}
</script>

<style>
@import url(../../style/btn.css);

page {
  background-color: #f2f2f2;
  font-size: 30rpx;
}

.top {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.need {
  color: red;
}

.view-item1 {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 2rpx solid #ededed;
}

.view-item1 p {
  flex: 1;
}

.view-item1 .title {
  flex: 2;
}

input {
  flex: 8;
}

.view-bar {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.floor {
  padding: 20rpx;
  background-color: #fff;
}

.content {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.container {
  padding: 20rpx;
}

.title2 {
  flex: 3;
}

.text2 {
  flex: 4;
}

.view2 {
  display: flex;
  padding: 20rpx;
  line-height: 55rpx;
}

.view2-item {
  flex: 1;
}

.view2-item title {
  font-size: 26rpx;
}

.price {
  display: flex;
  align-items: center;
}
</style>
